<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>e.preventDefault能阻止哪些默认事件</div>
    <div>
      <h2>1.表单提交</h2>
      <div>
        <form action="/submit_form" method="post">
          <label for="name">姓名:</label><br />
          <input type="text" id="name" name="name" /><br />
          <label for="email">邮箱:</label><br />
          <input type="email" id="email" name="email" /><br />
          <input type="submit" id="submit" value="提交" />
        </form>
      </div>
    </div>
    <div>
      <h2>2.链接跳转</h2>
      <div>
        <a href="http://www.baidu.com" id="aTag">跳转百度</a>
      </div>
    </div>
    <div>
      <h2>3.鼠标右键</h2>
      <div
        id="myDiv"
        style="width: 200px; height: 200px; background-color: lightblue"
      >
        右键点击这个区域
      </div>
    </div>
    <div>
      <h2>4.键盘按下</h2>
      <div style="height: 200px; width: 200px; overflow: scroll">
        <div
          style="height: 2000px; width: 100%; background-color: aquamarine"
          id="scrollArea"
        >
          阻止空格键向下滚动
        </div>
      </div>
    </div>
    <div>
      <h2>5.阻止元素默认拖放行为</h2>
      <div>
        <img src="./壁纸10.jpg" width="200px" height="200px" alt="" />
      </div>
    </div>
    <div>
      <h2>6.移动设备的触摸事件</h2>
      <div style="width: 100px; height: 100px; overflow: scroll">
        <div
          id="touchArea"
          style="width: 1000px; height: 1000px; background-color: aqua"
        >
          阻止触摸滚动
        </div>
      </div>
    </div>
  </body>
  <script>
    document.querySelector("#submit").onclick = function (e) {
      console.log("点击");
      e.preventDefault();
    };
    document.querySelector("#aTag").onclick = function (e) {
      console.log("点击");
      e.preventDefault();
    };
    document
      .getElementById("myDiv")
      .addEventListener("mousedown", function (event) {
        // 检查是否是右键点击（通常button属性为2）
        if (event.button === 2) {
          event.preventDefault(); // 阻止默认行为（例如上下文菜单）
          alert("你右键点击了这个区域！");
        }
      });
    document.addEventListener("keydown", function (event) {
      if (event.key === " ") {
        event.preventDefault();
        alert("阻止空格键滚动");
      }
    });
    document.querySelector("img").addEventListener("dragstart", (e) => {
      e.preventDefault();
      console.log("元素拖放");
    });
    document.querySelector("#touchArea").addEventListener("touchmove", (e) => {
      e.preventDefault();
      console.log("元素触摸");
    });
  </script>
</html>
